<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>解决方案</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        li {
            list-style: none;
        }
        
        a {
            text-decoration: none;
        }
        
        img {
            vertical-align: middle;
        }
        
        header {
            width: 100%;
            height: 271px;
            display: flex;
            flex-direction: column;
            position: relative;
        }
        
        #top {
            width: 100%;
            height: 48px;
            background-color: #323232;
        }
        
        #top #top-con {
            width: 1100px;
            margin: auto;
            line-height: 48px;
            display: flex;
            justify-content: space-between;
        }
        
        #top-con ul {
            display: flex;
        }
        
        #top-con ul li {
            width: 88px;
            height: 48px;
            text-align: center;
        }
        
        #top-con ul li a {
            font-size: 14px;
            color: #a6a6a6;
        }
        
        #top-con ul li a:hover {
            color: #dd4012;
        }
        
        #top-con ul li a:hover {
            color: #fff;
        }
        
        #top-con ul li:hover {
            background-color: #dd4012;
        }
        
        #top-con ul .point {
            background-color: #dd4012;
        }
        
        #top-con ul .point a {
            color: #fff;
        }
        
        #top-con #contact {
            display: flex;
            height: 48px;
            align-items: center;
        }
        
        #contact img {
            width: 18px;
            height: 18px;
            /* display: block; */
            margin-right: 17px;
            /* margin-top: 8px; */
            cursor: pointer;
        }
        
        #contact p {
            /* line-height: 36px; */
            font-size: 10px;
            color: #505050;
            margin-right: 24px;
        }
        
        #logo {
            width: 183px;
            height: 48px;
            position: relative;
        }
        
        #logo #logo-con {
            position: absolute;
            top: 0;
            left: 0;
        }
        
        #banner {
            flex: 1;
            width: 1920px;
            margin: auto;
            background: url(img/toubu.png) no-repeat;
        }
        
        #banner-con {
            width: 1100px;
            margin: auto;
        }
        
        #banner p {
            font-size: 27px;
            color: #6f6f6f;
            margin-top: 65px;
        }
        
        #bottom {
            width: 100%;
            height: 28px;
            position: absolute;
            bottom: -1px;
            left: 0;
            background: url(img/black.png);
        }
        
        #bottom #bottom-con {
            width: 1100px;
            margin: auto;
            line-height: 28px;
            color: #a6a6a6;
            font-size: 12px;
        }
        
        main {
            /* height: 1236px; */
            width: 100%;
            background-color: #f0f1f1;
            box-sizing: border-box;
            padding-top: 40px;
        }
        
        #main-con {
            width: 1100px;
            margin: auto;
            padding-bottom: 30px;
        }
        /* #main-con .pic-word {
            height: 1728px;
        } */
        
        .pic-word li {
            width: 1100px;
            height: 160px;
            display: flex;
        }
        
        .pic-word .left {
            width: 110px;
            height: 160px;
            box-sizing: border-box;
            border-top: 1px solid #e2e2e2;
            margin-right: 40px;
            /* background-color: aqua; */
            position: relative;
        }
        
        .pic-word .word {
            box-sizing: border-box;
            border-top: 1px solid #e2e2e2;
            padding-top: 19px;
            padding-left: 11px;
            /* background-color: brown; */
            flex: 1;
            display: flex;
        }
        
        .pic-word .word img {
            width: 220px;
            height: 100px;
            margin-right: 22px;
        }
        
        .pic-word .word .letter h2 a {
            font-size: 18px;
            color: #dd4012;
        }
        
        .pic-word .word .letter h2 a:hover {
            text-decoration: underline;
        }
        
        .pic-word .word .letter h5 {
            font-size: 12px;
            color: #333333;
            margin-top: 12px;
            margin-bottom: 12px;
        }
        
        .pic-word .word .letter h5 span {
            color: #a0a0a0;
        }
        
        .pic-word .word .letter p {
            font-size: 12px;
            color: #666666;
        }
        
        #main-con .numlist {
            width: 241px;
            height: 36px;
            margin: auto;
            display: flex;
            /* background: url(img/zuo.png) no-repeat; */
        }
        
        #main-con .numlist li {
            width: 36px;
            line-height: 36px;
            background-color: #fff;
            text-align: center;
            font-size: 9px;
            color: #b1a9bb;
        }
        
        #main-con .numlist li:nth-of-type(1) {
            background: #fff url(img/zuo.png) no-repeat 12px;
        }
        
        #main-con .numlist li:last-of-type {
            background: #fff url(img/zuo.png) no-repeat -190px;
        }
        
        #main-con .numlist .two {
            background-color: #dd4012;
            color: #fff;
        }
        
        footer {
            height: 82px;
            width: 100%;
            background-color: #323232;
        }
        
        #footer-con {
            width: 1100px;
            margin: auto;
            /* line-height: 82px; */
        }
        
        #about {
            float: right;
        }
        
        #about ul {
            display: flex;
            justify-content: flex-end;
            font-size: 12px;
            color: #999999;
            margin-top: 27px;
            overflow: hidden;
            text-align: right;
        }
        
        #about ul li {
            margin-right: 19px;
        }
        
        #about ul li:last-of-type {
            margin-right: 0;
        }
        
        #about p {
            font-size: 8px;
            color: #666666;
            margin-top: 8px;
            text-align: right;
        }
        
        #template {
            display: none;
        }
        
        .up {
            font-size: 12px;
            color: #999999;
            height: 43px;
            line-height: 43px;
            text-align: center;
        }
        
        .down {
            font-size: 41px;
            color: #999999;
            text-align: center;
        }
        
        .left img {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <header>
        <div id="top">
            <div id="top-con">
                <div id="logo">
                    <div id="logo-con">
                        <img src="img/logo.png" alt="">
                    </div>
                </div>
                <ul>
                    <li>
                        <a href="/index.html" target="_blank">网站首页</a>
                    </li>
                    <li>
                        <a href="#">传悦资源</a>
                    </li>
                    <li>
                        <a href="/case">传悦案例</a>
                    </li>
                    <li class="point">
                        <a href="/project">解决方案</a>
                    </li>
                    <li>
                        <a href="#">需求提交</a>
                    </li>
                </ul>
                <div id="contact">
                    <img src="img/phone.png" alt="">
                    <p>0535-60652189</p>
                    <img src="img/bQQ.png" alt="">
                    <img src="img/bweibo.png" alt="">
                    <img src="img/bweixin.png" alt="">
                    <img src="img/bEmail.png" alt="">
                </div>
            </div>



        </div>
        <div id="banner">
            <div id="banner-con">
                <p>VIEWPOINT传悦观点</p>
            </div>
        </div>
        <div id="bottom">
            <div id="bottom-con">
                <p>网站首页&nbsp;&nbsp;&gt;&nbsp;&nbsp;传悦观点</p>
            </div>
        </div>
    </header>
    <main>
        <div id="main-con">
            <% projectList.forEach(function(item){ %>
                <ul class="pic-word">
                    <li>
                        <div class="left">
                            <p class="up"></p>
                            <p class="down"></p>
                        </div>
                        <div class="word">
                            <%- item.img %>
                                <div class="letter">
                                    <h2>
                                        <a href="/projectdetail?id=<%=item.id%>">
                                            <%= item.title %>
                                        </a>
                                    </h2>
                                    <h5>标签：&nbsp;&nbsp;
                                        <%- item.span %>
                                    </h5>

                                    <%- item.content %>

                                </div>
                        </div>
                    </li>
                </ul>
                <% }) %>
                    <!-- <li>
                    <div class="left">
                    </div>
                    <div class="word">
                        <img src="img/jiejueimg.png" alt="">
                        <div class="letter">
                            <h2><a href="">行业合作专题，针对旅游行业的资源大散再重组</a></h2>
                            <h5>标签：&nbsp;&nbsp;<span>资源整合&nbsp;&nbsp;旅游行业&nbsp;&nbsp;行业专题</span></h5>
                            <p>根据旅客不同阶段的不同需求，已然可相应引导出不同的媒介资源，串联起所有需求，在不同阶段营造出不同的传播策略，达到既全面，但是又有针对性的深层次投放，这是需要基于对目标用户有一定研究，同时结合第三方客观数据去完成的专业投放。</p>
                        </div>
                    </div>

                </li> -->


                    <ul class="numlist">
                        <li></li>
                        <li>1</li>
                        <li class="two">2</li>
                        <li>3</li>
                        <li>4</li>
                        <li></li>
                    </ul>
        </div>
    </main>

    <footer>
        <div id="footer-con">
            <img src="img/bottom_logo.png" alt="">
            <div id="about">
                <ul>
                    <li>关于传悦</li>
                    <li>新闻动态</li>
                    <li>传悦观点</li>
                    <li>联系传悦</li>
                    <li>加入传悦</li>
                    <li>付款账户</li>
                </ul>
                <p>Copyright&nbsp;&copy;2013&nbsp;&nbsp;创梦网络科技有限责任公司&nbsp;&nbsp;&nbsp;||&nbsp;&nbsp;&nbsp;传悦&nbsp;&nbsp;Chnyoo.cn&nbsp;All&nbsp;Rights&nbsp;Reserved&nbsp;&nbsp;京ICP备12005221号</p>
            </div>
        </div>
    </footer>
</body>

</html>

<script>
    let date = new Date();
    // let time = document.querySelectorAll(".left");
    // console.log(time)

    let up = document.querySelectorAll(".up");
    let down = document.querySelectorAll(".down");
    // console.log(up);


    let year = date.getFullYear();
    let month = (date.getMonth() + 1) > 10 ? (date.getMonth() + 1) : "0" + (date.getMonth() + 1);
    let day = (date.getDate()) > 10 ? (date.getDate()) : "0" + (date.getDate());
    // console.log(`${year}-${month}-${day}`);

    for (let i = 0; i < up.length; i++) {
        up[i].innerHTML = `${year}-${month}`;
        down[i].innerHTML = day;
    }

    let firstLeft = document.querySelectorAll(".left")[0];
    let img = document.createElement("img");
    img.setAttribute("src", "img/new.png");
    firstLeft.appendChild(img);
</script>